<template>
	<a-radio-group :value="currentHouse" class="custom-radio-group" @change="change">
		<a-list :data-source="rooms" :loading="loading" row-key="id" :grid="{gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6, xxxl: 6}">
			<template #renderItem="{item: room}">
				<a-list-item>
					<a-radio-button :value="room">
						<a-typography-paragraph>
							<span>{{ room.roomName }}</span>
							<a-tag v-if="room.isMainRoom !== 1" :color="HOUSE_STATUS_MAP[room.status].color">
								{{ HOUSE_STATUS_MAP[room.status].label }}
							</a-tag>
						</a-typography-paragraph>
						<!-- 整租 -->
						<a-typography-paragraph type="secondary">
							<small>
								{{ orientationMap[room.orientation] || '朝向未知' }}-{{ room.houseArea }}m²
								<template v-if="room.isMainRoom === 1">|{{ room.fitmentTypeName }}</template>
							</small>
							<template v-if="room.isMainRoom === 1">
								<small>{{ room.room }}室{{ room.livingRoom }}厅{{ room.toliet }}卫</small>
								<small>第{{ room.currentFloor }}层/共{{ room.totalFloor }}层</small>
							</template>
							<template v-else>
								<!-- 预定 -->
								<template v-if="room.status === 20">
									<small>定金 {{ room.houseBook.money }}元</small>
									<small>{{ room.houseBook.name }}-{{ room.houseBook.phone }}</small>
								</template>
								<!-- 已租 -->
								<template v-else-if="room.status === 30">
									<small>{{ room.renterContract.price }}元/月</small>
									<small>{{ room.renterContract.renterName }}-{{ room.renterContract.renterPhone }}</small>
								</template>
								<!-- 空置、配置、锁房、无效、关闭-->
								<template v-else>
									<small>{{ room.actualPrice }}-{{ room.basePrice }}元/月</small>
									<small>可住人数{{ room.userlimit }}人</small>
								</template>
							</template>
						</a-typography-paragraph>
					</a-radio-button>
				</a-list-item>
			</template>
		</a-list>
	</a-radio-group>
</template>

<script setup lang="ts">
	import {HouseBase, HOUSE_STATUS_MAP, orientationMap} from '@/interface/house'
	import {nextTick, toRef} from 'vue'

	const emits = defineEmits(['change', 'update:value'])
	const props = defineProps<{
		value: HouseBase
		rooms: HouseBase[]
		loading: boolean
	}>()

	const currentHouse = toRef(props, 'value')

	// 改选房屋类型筛选
	const change = (e: any) => {
		emits('update:value', e.target.value)
		nextTick(() => emits('change', e.target.value))
	}
</script>

<style lang="less" scoped>
	.custom-radio-group {
		.ant-radio-button-wrapper {
			width: 100%;
		}

		.ant-typography {
			margin: 0;
			line-height: 22px;

			.ant-tag {
				float: right;
				margin: 0;
				font-size: 12px;
				border-radius: 12px;
			}
		}

		small {
			display: block;
			height: 20px;
		}
	}
</style>
